<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    

<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="utf-8">
    <meta name="keywords" content="从零开始搭建一个酷炫免费的个人博客, 五分钟学算法">
    <meta name="description" content="【新手向】从零开始搭建一个酷炫免费的个人博客由于公众号的文章不易后续整理阅读，于是小吴昨天上午花了半个小时使用 GitHub + Hexo 搭建了一下个人博客，打算将公众号的文章搬过去，支持关键字搜索、分类标签功能。效果是下面这样子的👇
">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>从零开始搭建一个酷炫免费的个人博客 | 五分钟学算法</title>
    <link rel="icon" type="image/png" href="/favicon.png">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">

    <script src="/libs/jquery/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

</head>

<body>

<header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="container">
            <div class="nav-wrapper">
                <div class="brand-logo">
                    <a href="/" class="waves-effect waves-light">
                        
                        <img src="/medias/logo.png" class="logo-img hide-on-small-only">
                        
                        <span class="logo-span">五分钟学算法</span>
                    </a>
                </div>
                

<a href="#" data-activates="mobile-nav" class="button-collapse"><i class="fa fa-navicon"></i></a>
<ul class="right">
    
    <li class="hide-on-med-and-down">
        <a href="/" class="waves-effect waves-light">
            
            <i class="fa fa-home"></i>
            
            <span>首页</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/tags" class="waves-effect waves-light">
            
            <i class="fa fa-tags"></i>
            
            <span>标签</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/categories" class="waves-effect waves-light">
            
            <i class="fa fa-bookmark"></i>
            
            <span>分类</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/archives" class="waves-effect waves-light">
            
            <i class="fa fa-archive"></i>
            
            <span>归档</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/about" class="waves-effect waves-light">
            
            <i class="fa fa-user-circle-o"></i>
            
            <span>关于</span>
        </a>
    </li>
    
    <li>
        <a id="toggleSearch" class="waves-effect waves-light">
            <i id="searchIcon" class="mdi-action-search" title="搜索"></i>
        </a>
    </li>

</ul>

<div class="side-nav" id="mobile-nav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">五分钟学算法</div>
        <div class="logo-desc">
            
            不忘初心，方得始终
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li>
            <a href="/" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-home"></i>
                
                首页
            </a>
        </li>
        
        <li>
            <a href="/tags" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-tags"></i>
                
                标签
            </a>
        </li>
        
        <li>
            <a href="/categories" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-bookmark"></i>
                
                分类
            </a>
        </li>
        
        <li>
            <a href="/archives" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-archive"></i>
                
                归档
            </a>
        </li>
        
        <li>
            <a href="/about" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-user-circle-o"></i>
                
                关于
            </a>
        </li>
        
        
        <li><div class="divider"></div></li>
        <li>
            <a href="https://github.com/MisterBooo" class="waves-effect waves-light" target="_blank">
                <i class="fa fa-github-square fa-fw"></i>Follower Me
            </a>
        </li>
        
    </ul>

    <div class="social-link">
    <a href="https://github.com/MisterBooo" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fa fa-github"></i>
    </a>



    <a href="mailto:misterbigbooo@gmail.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fa fa-envelope-open"></i>
    </a>




</div>
</div>

            </div>
        </div>

        
        <style>
    .nav-transparent .github-corner {
        display: none !important;
    }

    .github-corner {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        border: 0;
        transform: scale(1.1);
    }

    .github-corner svg {
        color: #0f9d58;
        fill: #fff;
        height: 64px;
        width: 64px;
    }

    .github-corner:hover .octo-arm {
        animation: a 0.56s ease-in-out;
    }

    .github-corner .octo-arm {
        animation: none;
    }

    @keyframes a {
        0%,
        to {
            transform: rotate(0);
        }
        20%,
        60% {
            transform: rotate(-25deg);
        }
        40%,
        80% {
            transform: rotate(10deg);
        }
    }
</style>

<a href="https://github.com/MisterBooo" class="github-corner tooltipped hide-on-med-and-down" target="_blank" data-tooltip="Follower Me" data-position="left" data-delay="50">
    <svg viewbox="0 0 250 250" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/>
    </svg>
</a>
        
    </nav>
</header>





<div class="bg-cover post-cover" style="background-image: url('/medias/featureimages/22.jpg')">
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <div class="description center-align post-title">
                        从零开始搭建一个酷炫免费的个人博客
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<main class="post-container content">

    
    <link rel="stylesheet" href="/libs/tocbot/tocbot.css">
<style>
    #articleContent h1,
    #articleContent h2,
    #articleContent h3,
    #articleContent h4,
    #articleContent h5,
    #articleContent h6 {
        padding-top: 76px;
        margin-top: -76px;
    }

    #articleContent h1 {
        line-height: 3.5rem;
    }

    #articleContent h2 {
        line-height: 3.2rem;
    }

    #articleContent h3 {
        line-height: 2.8rem;
    }

    #articleContent h4 {
        line-height: 2.5rem;
    }

    #articleContent h5 {
        line-height: 2.2rem;
    }

    #articleContent h6 {
        line-height: 1.9rem;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        margin: 35px 0 15px 0;
        padding-left: 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #toc-content .is-active-link::before {
        background-color: #42b983;
    }
</style>
<div class="row">
    <div class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/tags/新手/" target="_blank">
                                <span class="chip bg-color">新手</span>
                            </a>
                        
                            <a href="/tags/分享/" target="_blank">
                                <span class="chip bg-color">分享</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fa fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/categories/分享/" class="post-category" target="_blank">
                                分享
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                <div class="post-date info-break-policy">
                    <i class="fa fa-calendar-minus-o fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2019-01-26
                </div>

                
                    
                    <div class="info-break-policy">
                        <i class="fa fa-file-word-o fa-fw"></i>文章字数:&nbsp;&nbsp;
                        2k
                    </div>
                    

                    
                    <div class="info-break-policy">
                        <i class="fa fa-clock-o fa-fw"></i>阅读时长:&nbsp;&nbsp;
                        7 分
                    </div>
                    
                
				
				
                    <div id="busuanzi_container_page_pv" class="info-break-policy">
                        <i class="fa fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
                        <span id="busuanzi_value_page_pv"></span>
                    </div>
				
            </div>
        </div>
        <hr class="clearfix">
        <div class="card-content article-card-content">
            <div id="articleContent">
                <h1 id="【新手向】从零开始搭建一个酷炫免费的个人博客"><a href="#【新手向】从零开始搭建一个酷炫免费的个人博客" class="headerlink" title="【新手向】从零开始搭建一个酷炫免费的个人博客"></a>【新手向】从零开始搭建一个酷炫免费的个人博客</h1><p>由于公众号的文章不易后续整理阅读，于是小吴昨天上午花了半个小时使用 GitHub + Hexo 搭建了一下个人博客，打算将公众号的文章搬过去，支持关键字搜索、分类标签功能。效果是下面这样子的👇</p>
<p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fzk130ii6qg313l0ixx6q.gif" alt=""></p>
<p>结果后台好多小伙伴挺好奇博客是怎么搭建的，实际上这个挺简单的，小吴就从零开始分享一波如何搭建一个酷炫免费的个人博客吧，如果已经有博客的小伙伴可以留言一波网站地址：）</p>
<h3 id="前言：为什么要写技术博客"><a href="#前言：为什么要写技术博客" class="headerlink" title="前言：为什么要写技术博客"></a>前言：为什么要写技术博客</h3><h3 id="GitHub创建个人仓库"><a href="#GitHub创建个人仓库" class="headerlink" title="GitHub创建个人仓库"></a>GitHub创建个人仓库</h3><p>登录到 GitHub ，如果没有 GitHub 帐号，请使用你的邮箱注册 GitHub 帐号：<a href="https://github.com/join?source=header-home">https://github.com/join?source=header-home</a></p>
<p><img src="https://ws3.sinaimg.cn/large/006tNc79gy1fzk21xjx8gj31420myn1f.jpg" alt="注册"></p>
<p>登录成功之后，点击 GitHub 中的 New repository 创建新仓库，仓库名应该为：<strong>用户名</strong> .github.io 。这里<strong>用户名</strong>使用你的 GitHub 帐号名称代替，这是固定写法。</p>
<p><img src="https://ws4.sinaimg.cn/large/006tNc79gy1fzk2601f8kg313l0ixqca.gif" alt="创建新仓库"></p>
<p>ps: 因为我已经注册了同名仓库，因此第二次创建时会报错。</p>
<p>我的仓库名为👇：</p>
<p><img src="https://ws3.sinaimg.cn/large/006tNc79gy1fzk29gwq48j30fu03igls.jpg" alt="仓库名"></p>
<h3 id="Git管理"><a href="#Git管理" class="headerlink" title="Git管理"></a>Git管理</h3><p>Git 是目前世界上最先进的分布式版本控制系统（没有之一）。这是使用 Git 的目的是为了将我们的网站从本地提交上服务器（GitHub）上面去。我认为 Git 操作是程序员应该具备的一个基本操作，具体的 Git 操作细节可以查看廖雪峰的教程，讲的十分详细 <a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000</a></p>
<p><img src="https://ws3.sinaimg.cn/large/006tNc79gy1fzk2hsewy8j313r0k0n5i.jpg" alt="QQ20190126-162933"></p>
<p>安装好 Git 后，只需要进行下面的配置即可。</p>
<h4 id="配置信息"><a href="#配置信息" class="headerlink" title="配置信息"></a>配置信息</h4><p>在终端进行操作，设置 user.name 和 user.email 配置信息，我这里设置为全局。</p>
<pre class=" language-java"><code class="language-java">git config <span class="token operator">--</span>global user<span class="token punctuation">.</span>name <span class="token string">"你的GitHub用户名"</span>
git config <span class="token operator">--</span>global user<span class="token punctuation">.</span>email <span class="token string">"你的GitHub注册邮箱"</span>
</code></pre>
<h4 id="生成密钥"><a href="#生成密钥" class="headerlink" title="生成密钥"></a>生成密钥</h4><p>通过注册的邮箱生成 ssh 密钥文件：</p>
<pre class=" language-bash"><code class="language-bash">ssh-keygen -t rsa -C <span class="token string">"你的GitHub注册邮箱"</span>
</code></pre>
<p>然后直接三个回车即可，默认不需要设置密码。最后得到了两个文件：<code>id_rsa</code>和<code>id_rsa.pub</code>。</p>
<h4 id="拷贝密钥"><a href="#拷贝密钥" class="headerlink" title="拷贝密钥"></a>拷贝密钥</h4><p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fzk2vog35vj30mw0f2mzq.jpg" alt="拷贝密钥"></p>
<p>打开 <code>id_rsa.pub 文件</code>，将里面的内容全部复制。</p>
<p><img src="https://ws4.sinaimg.cn/large/006tNc79gy1fzk2xjwnthj30tv0b5dh4.jpg" alt="内容全部复制"></p>
<h4 id="粘贴到GitHub"><a href="#粘贴到GitHub" class="headerlink" title="粘贴到GitHub"></a>粘贴到GitHub</h4><p><img src="https://ws1.sinaimg.cn/large/006tNc79gy1fzk36z40lzj313s0k1n08.jpg" alt="GitHub SSh"></p>
<p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fzk376rh7yj313r0ketbj.jpg" alt="添加新的 SSH"></p>
<h4 id="测试GitHub-SSH"><a href="#测试GitHub-SSH" class="headerlink" title="测试GitHub SSH"></a>测试GitHub SSH</h4><p>添加好 <code>SSH Key</code>后，进行测试。</p>
<pre><code>ssh -T git@github.com
</code></pre><p>你将会看到：</p>
<pre><code>The authenticity of host &#39;github.com (207.97.227.239)&#39; can&#39;t be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?
</code></pre><p>选择 <code>yes</code></p>
<pre><code>Hi MisterBooo! You&#39;ve successfully authenticated, but GitHub does not provide shell access.
</code></pre><p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fzk3bfd4wzj30i10213yk.jpg" alt="ssh -T"></p>
<p>如果看到<code>Hi</code>后面是你的用户名，就说明成功了。</p>
<h3 id="安装Node-js"><a href="#安装Node-js" class="headerlink" title="安装Node.js"></a>安装Node.js</h3><p>Hexo 基于 Node.js，因此需要先安装 Node.js，你可以在这里进行对应电脑版本的下载：<a href="https://nodejs.org/en/download/" target="_blank" rel="noopener">https://nodejs.org/en/download/</a></p>
<p><img src="https://ws4.sinaimg.cn/large/006tNc79gy1fzk3ecq45aj313u0jkju0.jpg" alt="Node.js下载"></p>
<p>你也可以通过命令行进行安装：</p>
<p>cURL:</p>
<pre><code>$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
</code></pre><p>Wget:</p>
<pre><code>$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
</code></pre><p>安装完成后，重启终端并执行下列命令即可安装 Node.js。</p>
<pre><code>$ nvm install stable
</code></pre><h3 id="Hexo安装"><a href="#Hexo安装" class="headerlink" title="Hexo安装"></a>Hexo安装</h3><p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 <a href="http://daringfireball.net/projects/markdown/" target="_blank" rel="noopener">Markdown</a>（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p>
<p>所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。</p>
<pre><code>$ npm install -g hexo-cli
</code></pre><h3 id="Hexo使用"><a href="#Hexo使用" class="headerlink" title="Hexo使用"></a>Hexo使用</h3><p>安装好 Hexo 后，马上就能使用了。首先初始化博客，输入：</p>
<pre><code>$ hexo init myBlog
</code></pre><p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fzk3pvt34mj319f0u0qcz.jpg" alt=""></p>
<p>接下来，进入文件夹 <code>myBlog</code>,输入</p>
<pre><code>$ hexo s
</code></pre><p><img src="https://ws3.sinaimg.cn/large/006tNc79gy1fzk3s50l94j30hy054t96.jpg" alt=""></p>
<p>然后，打开浏览器输入地址：</p>
<pre><code>localhost:4000
</code></pre><p><img src="https://ws3.sinaimg.cn/large/006tNc79gy1fzk3te442qj313t0n1gxs.jpg" alt="hexo网站"></p>
<p>执行到这里事实上博客就已经搭建好了，接下来就是去完善它。</p>
<p>注意：下面的命令都是在 <code>myBlog</code>文件里进行操作的。</p>
<h3 id="添加文章"><a href="#添加文章" class="headerlink" title="添加文章"></a>添加文章</h3><p><img src="https://ws3.sinaimg.cn/large/006tNc79gy1fzk7dls02rj31840kiaco.jpg" alt="添加文章"></p>
<h4 id="1-直接导入文章"><a href="#1-直接导入文章" class="headerlink" title="1.直接导入文章"></a>1.直接导入文章</h4><p>你可以将你平时写的文章直接导入到 <code>_posts</code>  文件夹里，注意文章类型得是 <code>md</code>格式。</p>
<h4 id="2-写新文章"><a href="#2-写新文章" class="headerlink" title="2.写新文章"></a>2.写新文章</h4><p>你可以执行下列命令来创建一篇新文章。</p>
<pre><code>$ hexo new [layout] &lt;title&gt;
</code></pre><p>你可以在命令中指定文章的布局（layout），默认为 <code>post</code>，可以通过修改 <code>_config.yml</code> 中的 <code>default_layout</code> 参数来指定默认布局。</p>
<p><img src="https://ws3.sinaimg.cn/large/006tNc79gy1fzk7hoiy3ij30z6042q3w.jpg" alt="写新文章"></p>
<p>这样在 <code>_posts</code>  文件夹里也生成了一篇新的文章。</p>
<p><img src="https://ws1.sinaimg.cn/large/006tNc79gy1fzk7j5ffx5j316c0ewmzp.jpg" alt="新的文章"></p>
<h3 id="生成网页"><a href="#生成网页" class="headerlink" title="生成网页"></a>生成网页</h3><p>使用 Hexo 生成静态文件快速而且简单。</p>
<pre><code>$ hexo generate
</code></pre><p>你也可以简写成</p>
<pre><code>$ hexo g
</code></pre><p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fzk7n3i1jyj318d0u0wpf.jpg" alt="生成文章"></p>
<h3 id="启动服务预览文章"><a href="#启动服务预览文章" class="headerlink" title="启动服务预览文章"></a>启动服务预览文章</h3><p>输入以下命令以启动服务器，你的网站会在 <code>http://localhost:4000</code> 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，无须重启服务器。</p>
<pre><code>$ hexo server
</code></pre><p>你也可以简写成</p>
<pre><code>$ hexo s
</code></pre><p>如果你想要更改端口，或是在执行时遇到了 <code>EADDRINUSE</code> 错误，可以在执行时使用 <code>-p</code> 选项指定其他端口，如下：</p>
<pre><code>$ hexo server -p 5000
</code></pre><p><img src="https://ws1.sinaimg.cn/large/006tNc79gy1fzk7pthinwj315606kdhh.jpg" alt="查看文章"></p>
<p><img src="https://ws1.sinaimg.cn/large/006tNc79gy1fzk7rs1dp8j31iy0u0e81.jpg" alt="网站"></p>
<h3 id="小总结"><a href="#小总结" class="headerlink" title="小总结"></a>小总结</h3><pre><code>hexo new &quot;我的博客文章&quot; #新建文章
</code></pre><pre><code>hexo generate #生成网页
</code></pre><pre><code>hexo server #启动服务预览
</code></pre><p>这三个命令依次就是新建一篇博客文章、生成网页、在本地预览的操作。</p>
<h3 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h3><p>Hexo 提供了快速方便的一键部署功能，只需一条命令就能将网站部署到服务器上。</p>
<pre><code>$ hexo deploy
</code></pre><p>你也可以简写成</p>
<pre><code>$ hexo d
</code></pre><p>在开始之前，必须先在 <code>_config.yml</code> 中修改参数，一个正确的部署配置中至少要有 <code>type</code> 参数，例如：</p>
<pre><code>deploy:
  type: git
</code></pre><p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fzk7w0wzlyj30mk0eetae.jpg" alt="config"></p>
<p>在<code>_config.yml</code>中进行修改。</p>
<p><img src="https://ws4.sinaimg.cn/large/006tNc79gy1fzk7xrf4smj30y40u00yx.jpg" alt=""></p>
<p>这一步的目的是将 Hexo 与 GitHub 进行关联。</p>
<p>配置好后通过</p>
<pre><code>$ hexo d
</code></pre><p>命令，稍等片刻，网站就已经部署好了，可以在浏览器输入<code>你的GitHub名称.github.io</code>，这样一个免费的博客就已经搭建好了。</p>
<h3 id="Hexo-主题"><a href="#Hexo-主题" class="headerlink" title="Hexo 主题"></a>Hexo 主题</h3><p>hexo 默认的主题可能显得有点呆板，你可以在 <a href="https://hexo.io/themes/index.html" target="_blank" rel="noopener">https://hexo.io/themes/index.html</a>进行主题的挑选更换。将下好的主题安放在<code>themes</code>文件夹内，同时在<code>_config.yml</code>中进行主题修改就好了。</p>
<p>经过一个小时的主题筛选，我选择了<code>hexo-theme-matery</code> 这款主题。通过<a href="https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/" target="_blank" rel="noopener">https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/</a>文档说明，经过简单的配置，效果就出来了！</p>
<p><img src="https://ws1.sinaimg.cn/large/006tNc79gy1fzk9f1968uj30yk0jmtb2.jpg" alt=""></p>
<p>一般大佬们提供的主题都会提供文档说明，按照说明进行简单的设置就能拥有一个酷炫的页面了。</p>
<p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fzk130ii6qg313l0ixx6q.gif" alt=""></p>
<h3 id="Markdown-写作"><a href="#Markdown-写作" class="headerlink" title="Markdown 写作"></a>Markdown 写作</h3><p>Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。</p>
<p>世面上支持 Markdown 语法的编辑器不胜枚举，选择起来十分困难，小吴在这里推荐 Typora 这款 Markdown 写作软件。</p>
<p> Typora 是一款免费的 MD 编辑器，它是优雅简洁与强大开放的完美结合体。</p>
<p>官网直达 <a href="https://typora.io" target="_blank" rel="noopener">https://typora.io</a></p>
<h4 id="Image"><a href="#Image" class="headerlink" title="Image"></a>Image</h4><p>选择 Typora 一个最主要的原因是它对图片的良好支持。</p>
<p>在 Mac 上安装好 iPic 后 ，并在设置中将图片插入修改为 通过 iPic 上传 ，快捷键是 control + command + i ，就可以十分快捷优雅地完成图片插入。强调一点：图床使用默认的微博图床即可，建议不要折腾。</p>
<p><img src="https://ws1.sinaimg.cn/large/006tNc79gy1fzk9r3q6toj30s40rwh1u.jpg" alt=""></p>
<p>这样，每次写作时，将图片拖入到 Typora 里，图片就能自动上传到图床上。</p>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul>
<li><p>申请 GitHub 账号</p>
</li>
<li><p>在 GitHub 上创建仓库</p>
</li>
<li><p>配备 Git ，同时将 SSH Key 提交到 GitHub 上</p>
</li>
<li><p>安装 Node.js</p>
</li>
<li><p>安装 Hexo</p>
</li>
<li><p>安装 Hexo 主题</p>
</li>
<li><p>使用 Markdown 软件写文章</p>
</li>
</ul>
<p>希望这篇文章能帮到想写博客却还没付诸行动的人，毕竟拥有一个免费且酷炫的博客还是挺简单还挺好玩的：）</p>

            </div>
            <hr>

            

            <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">

<div id="article-share">
    
    <div class="social-share" data-disabled="qzone" data-wechat-qrcode-helper="<p>微信里点“发现”->“扫一扫”二维码便可查看分享。</p>"></div>
    
</div>

<script src="/libs/share/js/social-share.min.js"></script>

            <div class="reprint">
                <p>
                    <span class="reprint-tip">
                        <i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;转载请注明:
                    </span>
                    <a href="https://github.com/MisterBooo/misterbooo.github.io" class="b-link-green">五分钟学算法</a>
                    <i class="fa fa-angle-right fa-lg fa-fw text-color"></i>
                    <a href="/2019/01/26/xin-shou-xiang-cong-ling-kai-shi-da-jian-yi-ge-ku-xuan-mian-fei-de-ge-ren-bo-ke/" class="b-link-green">从零开始搭建一个酷炫免费的个人博客</a>
                </p>
            </div>
        </div>
    </div>

    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fa fa-dot-circle-o"></i>&nbsp;本篇
            </div>
            <div class="card">
                <a href="/2019/01/26/xin-shou-xiang-cong-ling-kai-shi-da-jian-yi-ge-ku-xuan-mian-fei-de-ge-ren-bo-ke/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/22.jpg" class="responsive-img" alt="从零开始搭建一个酷炫免费的个人博客">
                        
                        <span class="card-title">从零开始搭建一个酷炫免费的个人博客</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary">【新手向】从零开始搭建一个酷炫免费的个人博客由于公众号的文章不易后续整理阅读，于是小吴昨天上午花了半个小时使用 GitHub + Hexo 搭建了一下个人博客，打算将公众号的文章搬过去，支持关键字搜索、分类标签功能。效果是下面这样子的👇
</div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="fa fa-clock-o fa-fw icon-date"></i>2019-01-26
                            </span>
                        <span class="publish-author">
                            
                            <i class="fa fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/分享/" class="post-category" target="_blank">
                                    分享
                                </a>
                            
                            
                        </span>
                    </div>
                </div>

                
                <div class="card-action article-tags">
                    
                    <a href="/tags/新手/" target="_blank">
                        <span class="chip bg-color">新手</span>
                    </a>
                    
                    <a href="/tags/分享/" target="_blank">
                        <span class="chip bg-color">分享</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fa fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/2019/01/26/75/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/1.jpg" class="responsive-img" alt="Leetcode上第 75 号问题： Two Sum II">
                        
                        <span class="card-title">Leetcode上第 75 号问题： Two Sum II</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary">leetcode上第75号问题：Two Sum II

给定一个已按照升序排列 的有序数组，找到两个数使得它们相加之和等于目标数。


函数应该返回这两个下标值 index1 和 index2，其中 index1 必须小于 index2。
</div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="fa fa-clock-o fa-fw icon-date"></i>2019-01-26
                            </span>
                        <span class="publish-author">
                            
                            <i class="fa fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/LeetCode/" class="post-category" target="_blank">
                                    LeetCode
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/数组/" target="_blank">
                        <span class="chip bg-color">数组</span>
                    </a>
                    
                    <a href="/tags/指针/" target="_blank">
                        <span class="chip bg-color">指针</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>
</div>


<script>
    $('#articleContent').on('copy', function (e) {
        // IE8 or earlier browser is 'undefined'
        if (typeof window.getSelection === 'undefined') return;

        var selection = window.getSelection();
        // if the selection is short let's not annoy our users.
        if (('' + selection).length < Number.parseInt('15')) {
            return;
        }

        // create a div outside of the visible area and fill it with the selected text.
        var bodyElement = document.getElementsByTagName('body')[0];
        var newdiv = document.createElement('div');
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';
        bodyElement.appendChild(newdiv);
        newdiv.appendChild(selection.getRangeAt(0).cloneContents());

        // we need a <pre> tag workaround.
        // otherwise the text inside "pre" loses all the line breaks!
        if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
            newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
        }

        var url = document.location.href;
        newdiv.innerHTML += '<br />'
            + '来源: 五分钟学算法<br />'
            + '作者: 程序员小吴师兄<br />'
            + '链接: <a href="' + url + '">' + url + '</a><br />'
            + '本文章著作权归作者所有，任何形式的转载都请注明出处。';

        selection.selectAllChildren(newdiv);
        window.setTimeout(function () {bodyElement.removeChild(newdiv);}, 200);
    });
</script>

    </div>
    <div class="col l3 hide-on-med-and-down">
        <div class="toc-widget">
            <div class="toc-title"><i class="fa fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<script src="/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });
    });
</script>
    

</main>


<footer class="page-footer bg-color">
    <div class="container row center-align">
        <div class="col s12 m8 l8 copy-right">
            本站由&copy;<a href="https://blinkfox.github.io/" target="_blank">程序员小吴师兄</a>基于
            <a href="https://hexo.io/" target="_blank">Hexo</a> 的
            <a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">hexo-theme-matery</a>主题搭建.


            
                &nbsp;<i class="fa fa-area-chart"></i>&nbsp;站点总字数:&nbsp;
                <span class="white-color">9.7k</span>
            
    
            
    		
                <br>
                
                <span id="busuanzi_container_site_pv">
                    <i class="fa fa-heart-o"></i>
                    本站总访问量 <span id="busuanzi_value_site_pv" class="white-color"></span>
                </span>
                
                
                <span id="busuanzi_container_site_uv">
                    <i class="fa fa-users"></i>
                    次,&nbsp;访客数 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
                </span>
                
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/MisterBooo" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fa fa-github"></i>
    </a>



    <a href="mailto:misterbigbooo@gmail.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fa fa-envelope-open"></i>
    </a>




</div>
    </div>
</footer>

<div class="progress-bar"></div>


<!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fa fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字" class="search-input" autofocus>
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/js/search.js"></script>
<script type="text/javascript">
    searchFunc("/" + "search.xml", 'searchInput', 'searchResult');
</script>
<!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fa fa-angle-up"></i>
    </a>
</div>


<script src="/libs/materialize/js/materialize.min.js"></script>
<script src="/libs/masonry/masonry.pkgd.min.js"></script>
<script src="/libs/aos/aos.js"></script>
<script src="/libs/scrollprogress/scrollProgress.min.js"></script>
<script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
<script src="/js/matery.js"></script>

<!-- Global site tag (gtag.js) - Google Analytics -->




    <script async src="/libs/others/busuanzi.pure.mini.js"></script>


</body>
</html>